/*
 * @Description:
 * @Author: kanglin
 * @Date: 2018-07-09 09:58:42
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" rel="stylesheet/less" type="text/less" >
    .v-customer-store-product-index{
		.code{
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
			display: block;
		}
		.ivu-table-column-center{
			padding: 5px 0;
		}
		.ivu-table-body {
			overflow-x: auto;
		}
		.ivu-table-cell{
			padding-left: 10px;
			padding-right: 10px;
		}
		.info{
			text-align: left;
			white-space: nowrap;
			padding: 5px 0;
		}
		.info-thumb{
			width: 60px;
			height: 60px;
			cursor: pointer;
			display: table-cell;
			img{
				width: 100%;
			}
		}
		.info-title{
			height: 60px;
			display:  table-cell;
			white-space: normal;
			vertical-align: middle;
			padding-left: 8px;
		}
		.prices-item {
			white-space: nowrap;
			text-align: center;
		}
		.deleted, .hot, .new, .sale {
			cursor: pointer;
		}
	}
 </style>

<template>
	<div class="v-customer-store-product-index">
		<Table
			:data="data"
			:loading="loading"
			:columns="columns"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="handleSortChange"/>
	</div>
</template>

<script>
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import { Tag, Icon } from 'iview';

export default {
	name: 'CustomerStoreProductIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		data: {
			type: Array,
			required: true,
		},
		loading: {
			type: Boolean,
			required: true,
		},
		brands: {
			type: Object,
			required: true,
		},
		sort: {
			type: Function,
			required: true,
		},
		stores: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('product.code'),
					key: 'spu_code',
					align: 'center',
					width: 80,
					render: (h, { row }) => <div class="code" title={row.spu_code}> { row.spu_code || '-' } </div>,
				},
				{
					title: this.$t('store.name'),
					key: 'store_id',
					align: 'center',
					width: 80,
					render: (h, { row }) => {
						const [store] = this.stores.filter(item => item.id === row.store_id);
						return <div> {store.name} </div>;
					},
				},
				{
					title: this.$t('product.title'),
					key: 'title',
					width: 240,
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.thumb_image ? <img onClick={() => this.showPicture(row.thumb_image.key, 400) } src={ row.thumb_image.key } alt="无" /> : '无';
						const title = row.title ? row.title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ thumb_image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('product.price'),
					key: 'market_price',
					width: this.$i18n.locale === 'en-CN' ? 120 : 150,
					align: 'center',
					render: (h, { row }) => (
						<div class="price">
							<div class="prices-item">
								{ this.$t('product.origin_price') }　: { row.market_price || this.$t('common.none') }
							</div>
							<div class="prices-item">
								{ this.$t('product.promotional_price') }: { row.sell_price || this.$t('common.none') }
							</div>
						</div>
					),
				},
				{
					title: this.$t('product.stock'),
					key: 'stock',
					align: 'center',
					width: 80,
					render: (h, { row }) => <div> { row.stock || 0 } </div>,
				},
				{
					title: this.$t('product.category'),
					key: 'category_id',
					align: 'center',
					width: 80,
					render: (h, { row }) => {
						const category = row.category && row.category.name ? row.category.name : this.$t('common.none');
						return (<div> { category } </div>);
					},
				},
				{
					title: this.$t('product.brand'),
					key: 'brand_id',
					align: 'center',
					width: 120,
					render: (h, { row }) => <div> { this.brands[row.brand_id] || this.$t('common.none') } </div>,
				},

				{
					title: this.$t('product.tag'),
					key: 'product_tags',
					// width: 140,
					align: 'center',
					render: (h, { row }) => {
						let tags = this.$t('common.none');
						if (Array.isArray(row.product_tags) && row.product_tags.length > 0) {
							tags = row.product_tags.map(tag => <Tag type="border">{ tag.name }</Tag>);
						}
						return (<div>{ tags }</div>);
					},
				},
				{
					title: this.$t('product.color_thumb'),
					key: 'color_thumb_image',
					width: 120,
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.color_thumb_image
								? <img src={ row.color_thumb_image.key } alt="" width="50%"/>
								: this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('product.try_on'),
					key: 'try_on',
					width: 80,
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { row.try_on || this.$t('common.none') } </div>,
				},
				{
					title: this.$t('product.priority'),
					key: 'priority',
					align: 'center',
					width: 80,
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.priority) || this.$t('common.none') } </div>,
				},
				{
					title: this.$t('product.sale'),
					key: 'is_sale',
					align: 'center',
					width: 50,
					render: (h, { row }) => {
						const is_sale = (Number(row.is_sale) === 1) ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon>;
						return (
							<div class="sale">{is_sale}</div>
						);
					},
				},
				{
					title: this.$t('product.hot'),
					key: 'is_deleted',
					align: 'center',
					width: 50,
					render: (h, { row }) => {
						const is_hot = Number(row.is_hot) === 1 ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon>;
						return (
							<div class="hot">{ is_hot }</div>
						);
					},
				},
				{
					title: this.$t('product.new'),
					key: 'is_deleted',
					align: 'center',
					width: 50,
					render: (h, { row }) => {
						const is_new = Number(row.is_new) === 1 ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon>;
						return (
							<div class="new">{ is_new }</div>
						);
					},
				},
				{
					title: this.$t('product.deleted'),
					key: 'is_deleted',
					align: 'center',
					width: 50,
					render: (h, { row }) => {
						const is_deleted = Number(row.is_deleted) === 1 ? <Icon type="close"></Icon> : <Icon type="checkmark"></Icon>;
						return (
							<div class="deleted">
								{ is_deleted }
							</div>
						);
					},
				},
				{
					title: this.$t('common.created_at'),
					width: 100,
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
			],
		};
	},
	methods: {
		/**
		 * 排序
		 * @param  {String} key   {key值}
		 * @param  {String} order {order排序字段}
		 * @return {undefined}
		 */
		handleSortChange({ key, order }) {
			const form = {
				order_bys: null,
			};
			switch (order) {
			case 'asc':
				Object.assign(form, {
					current_page: null,
					order_bys: [{
						order_by: key,
						sort: 'ASC',
					}],
				});
				break;
			case 'desc':
				Object.assign(form, {
					current_page: null,
					order_bys: [{
						order_by: key,
						sort: 'DESC',
					}],
				});
				break;
			default:
				break;
			}
			this.sort(form);
		},
	},
};
</script>

